
<!DOCTYPE html>
<html class="rem bg">
<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <title></title>
    <link rel="stylesheet" href="{{url('css/reset.m.css')}}"/>
    <link rel="stylesheet" href="{{url('css/wx.css')}}"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TAnNu98o3b2rYlPb8klG2E3D"></script>
</head>
<body>
<article class="page">
    <header class="header">

    </header>
    <main class="main">
        <div class="store-info">
            <div class="photo fll">
                <img src="{{url('img/photo.jpg')}}" alt="">
            </div>
            <div class="info">
                <div class="contact">
                    <a id="tel" href="" class="i-icon phone flr">&#xe60a;</a>
                    <h4 id="title"></h4>
                    <p class="f-lt">电话：<span id="tels"></span></p>
                </div>
                <div class="local">
                    <p class="f-lt">地址：<span id="address"></span></p>
                    <p class="f-lt"><span>距离：<span id="distance"></span>km</span><a href="javascript:;" class="i-icon walk">&#xe60b;</a><a href="javascript:;" class="i-icon transit">&#xe609;</a></p>
                </div>
            </div>
            <div class="path">
                <div id="result">

                </div>
            </div>
        </div>
        <div id="map"></div>
    </main>
    <footer class="footer">

    </footer>
</article>
<script src="{{url('js/zepto.min.js')}}"></script>
<script src="{{url('js/fastclick.js')}}"></script>
<script>
    if (typeof FastClick === 'function') {
        FastClick.attach(document.body);
    }

    var poi = null;

    // 百度地图API功能
    $(function () {
        if (window.sessionStorage) {
            localPoint = sessionStorage.getItem('point');
            lng = sessionStorage.getItem('lng');
            lat = sessionStorage.getItem('lat');
            poi = JSON.parse(sessionStorage.getItem('poi'));
            $('#title').text(poi.title);
            $('#tel').attr('href',"tel:" + poi.tel);
            $('#tels').text(poi.tel);
            $('#address').text(poi.address);
            $('#distance').text((poi.distance / 1000).toFixed(2));
        }
        var map = new BMap.Map("map");
        var localPoint = new BMap.Point(lng, lat);
        var destPoint = new BMap.Point(poi.location[0], poi.location[1]);
        var marker = new BMap.Marker(localPoint);
        map.centerAndZoom(localPoint, 15);
        map.addOverlay(marker);

        var icon = $('.store-info').find('.i-icon');
        $('.walk').on('tap', function () {
            icon.removeClass('cur');
            $(this).addClass('cur');
            var walk = new BMap.WalkingRoute(poi.province, {
                renderOptions: {
                    map: map,
                    panel: 'result'
                }
            });
            walk.search({title: '起点', point: localPoint}, {title: '终点', point: destPoint});
        });

        $('.transit').on('tap', function () {
            icon.removeClass('cur');
            $(this).addClass('cur');
            var transit = new BMap.TransitRoute(poi.province, {
                renderOptions: {
                    map: map,
                    panel: 'result'
                }
            });
            transit.search({title: '起点', point: localPoint}, {title: '终点', point: destPoint});
        });
    });
    $('#map').height($(window).height() - $('.store-info').height());
</script>
</body>
</html>